<template>
	<view class="page">
		<view
			 style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 24upx;margin-left: 24upx;
	margin-right: 24upx;justify-content: space-between;">
			<view style="display: flex;flex-direction: column;margin-top: 20upx;background: #FFFFFF;padding: 10upx 0upx;border-radius: 16upx;"
			 v-for="(item,index) in codeList" :key="index"
			 @click="codeDetail(item.id)" >
				<image style="width: 340upx;border-radius: 16upx;height: 340upx;"  :src="item.images" mode="aspectFill">
				</image>
				
				<view style="margin-top: 15upx;color: #191919;font-weight: bold;word-break: break-all;width: 306upx;margin-left: 16upx;font-size: 26upx;
				text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{item.title}}</view>
				<!-- <view style="margin-top: 15upx;margin-left: 16upx;">
					<span style="font-size: 20upx;color: #FF3232;">￥</span>
					<span style="color: #FF3232;font-size: 34upx;font-weight: bold;">{{item.price}}</span>
				</view> -->
				<view style="display: flex;flex-direction: row;margin-top: 15upx;margin-left: 16upx;justify-content: space-between;align-items: center;">
					<!-- <view style="display: flex;flex-direction: row;align-items: center;">
						<image style="width: 24upx;height: 24upx;" src="../../static/images/publish-time-icon.png"
							mode=""></image>
						<view style="color: #B7B8BB;font-size: 24upx;margin-left: 8upx;">{{item.publishTime}}</view>
					</view> -->
					<view style="align-items: center;display: flex;flex-direction: row;">
						<span style="font-size: 20upx;color: #FF3232;">￥</span>
						<span style="color: #FF3232;font-size: 34upx;font-weight: bold;">{{item.price}}</span>
					</view>
					<view style="display: flex;flex-direction: row;align-items: center;margin-right: 15upx;">
						<image style="width: 24upx;height: 24upx;" src="../../static/images/view-count-icon.png"
							mode=""></image>
						<view style="color: #B7B8BB;font-size: 24upx;margin-left: 8upx;">{{item.viewCount}}</view>
					</view>
				</view>
			</view>
			
			
	


		</view>

	<view v-if="showText" style="font-size: 24upx;color: #B7B8BB; width: 100%;text-align: center;">暂无更多源码~</view>

	</view>
</template>

<script>
	import{source_code_list} from '../../api/source-code/source-code.js'
	export default {
		data() {
			return {
				codeList:[],
				pageNumber:1,
				showText:false
			}
		},
		onLoad() {
			this.getSourceCodeList()
		},
		onPullDownRefresh() {
			this.getSourceCodeList()
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},500)
		},
		onShow() {
			this.getSourceCodeList()
		},
		onReachBottom() {
			this.pageNumber++;
			this.getSourceCodeList()
			uni.showLoading({
				title:'加载中~'
			})
		},
		methods: {
			
			getSourceCodeList(){
				let params={}
				params.pageNumber=this.pageNumber
				source_code_list(params).then(res=>{
					if(res.status===200){
						if(res.data !== null){
							if(this.pageNumber===1){
								this.codeList=res.data
							}else{
								this.codeList=[...this.codeList,...res.data]
							}
							
						}else{
							this.showText=true;
						}
						
					}
					
				})
			},
			codeDetail(id){
				uni.navigateTo({
					url:'../code-detail/code-detail?id='+id
				})
			}
		}
	}
</script>

<style>

.page{
	background: #F9F9F8 ;
}

.market-code-wrapper{
	
}

</style>
